<template>
  <div>
    <ul>
      <li v-for="item in sidebar" class="topic_item">
        <div class="title_logo">
          <img :src="`http://localhost:3000/api/news/img/?url=${item.url}`" alt="加载失败">
        </div>
        <ul class="news_list">
          <li v-for="news in item.content" class="news_list_content">
            <router-link :to="`/newsDetail?id=${news._id}`">{{news.title}}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "TodayTopic",
    methods: {
      getSidebar() {
        this.$store.dispatch('getSidebar')
      }
    },
    created() {
      this.getSidebar()
    },
    computed: {
      ...mapState(['sidebar'])
    }
  }
</script>

<style scoped lang="less">
  .topic_item {
    background: #F7F8F9;
    margin-bottom: 50px;
    padding: 20px 20px 10px 20px;

    .title_logo {
      width: 100px;
      height: 30px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;

      img {
        width: 100%;
      }
    }

    .news_list {
      .news_list_content {
        position: relative;
        font-size: 16px;
        margin: 20px;
        cursor: pointer;
      }

      .news_list_content:hover a {
        color: red;
      }

      .news_list_content:after {
        content: '';
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #5889EC;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
      }
    }
  }
</style>